| echarts实现3D立体堆叠柱状图 | 您所在的位置：网站首页 › echarts 立体圆柱 › echarts实现3D立体堆叠柱状图 |
echarts实现3D立体堆叠柱状图
|
基于这篇博客的灵感，在其基础上做了一些改动； echarts叠加3D立体柱状图_黑色的糖果的博客-CSDN博客_echarts立体柱状堆叠图 效果图 实现代码： var legends = ['A相','B相','C相']; var name = ['01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00']; // 数据数组1 var data = [0.73,0.57,0.48,0.45,0.56,0.49,0.4,0.13,0.84,0.76,0.31,0.27,0.92]; // 数据数组2 var data2 = [1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44]; var data3 = [1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44]; var color = [ { type: "linear", x: 0, x2: 1, y: 0, y2: 0, colorStops: [ { offset: 0, color: "#a7f8f3", }, { offset: 0.5, color: "#a7f8f3", }, { offset: 0.5, color: "#62ccc6", }, { offset: 1, color: "#62ccc6", }, ], }, { type: "linear", x: 0, x2: 1, y: 0, y2: 0, colorStops: [ { offset: 0, color: "#fdb8b8", }, { offset: 0.5, color: "#fdb8b8", }, { offset: 0.5, color: "#f07070", }, { offset: 1, color: "#f07070", }, ], }, { type: "linear", x: 0, x2: 1, y: 0, y2: 0, colorStops: [ { offset: 0, color: "#0ffdbf", }, { offset: 0.5, color: "#0ffdbf", }, { offset: 0.5, color: "#8ffd86", }, { offset: 1, color: "#8ffd86", }, ], }, ]; var barWidth = 30; var constData = []; var constData2 = []; var showData = []; var otherData = []; for (var i = 0; i < data.length; i++) { data[i] = Number(data[i]); data2[i] = Number(data2[i]); data3[i] = Number(data3[i]); otherData[i] = data[i] + data2[i] + data3[i]; constData2[i] = data[i] + data2[i]; if (data[i] 0) { showData.push({ value: data[i], itemStyle: { normal: { borderColor: "#fdb8b8",// 第二个柱子底部的颜色 borderWidth: 2, color: "#fdb8b8", }, }, }); } else { showData.push({ value: data[i], itemStyle: { normal: { borderColor: "#89e3ec", borderWidth: 2, color: "#89e3ec", }, }, }); } } } console.log(constData) console.log(constData2) console.log(otherData) var option = { tooltip: { trigger: "axis", formatter: function (params) { return params[0].name + '' + params[0].seriesName + ' : ' + (params[0].value).toFixed(2) + '' + params[1].seriesName + ' : ' + (params[1].value).toFixed(2) + '' + params[2].seriesName + ' : ' + (params[2].value).toFixed(2) + ''; } }, legend: { data: legends, selectedMode: false,//取消点击事件 show: true }, grid: { left: "3%", //图表距边框的距离 right: "3%", top: "15%", bottom: "5%", containLabel: true, }, xAxis: { data: name, axisTick: { show: false, }, }, yAxis: { name:'线损值/kWh', axisTick: { show: false, } }, series: [ { z: 1, name: legends[0], type: "bar", barWidth: barWidth, stack: "总量", color: color[0], data: data, }, { z: 2, name:legends[1], type: "bar", barWidth: barWidth, stack: "总量", color: color[1], data: data2 }, { z: 3, name: legends[2], type: "bar", barWidth: barWidth, stack: "总量", color: color[2], data: data3 }, { z: 4, name: "项目", type: "pictorialBar", data: constData, symbol: "diamond", symbolOffset: ["0%", "50%"], symbolSize: [barWidth, 10], itemStyle: { normal: { color: color[0], }, }, tooltip: { show: false, }, }, { z: 5, name: "项目", type: "pictorialBar", data: constData2, symbolPosition: "end", symbol: "diamond", symbolOffset: ["0%", "-50%"], symbolSize: [barWidth, 10], itemStyle: { normal: { color: color[2], }, }, tooltip: { show: false, }, }, { z: 6, name: "项目", type: "pictorialBar", data: otherData, symbol: "diamond", symbolPosition: "end", symbolOffset: ["0%", "-50%"], symbolSize: [barWidth, 10], itemStyle: { normal: { color: color[2], }, }, tooltip: { show: false, }, }, { z: 7, name: "项目", type: "pictorialBar", symbolPosition: "end", data: showData, symbol: "diamond", symbolOffset: ["0%", "-50%"], symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth], tooltip: { show: false, }, }, ], }; 复制代码 |
【本文地址】
公司简介
联系我们